<template>
  <Layout
    :tabs="state"
    v-model="page"
    :total="total"
    @change="getList()"
    @tab="
      page.num = 1;
      page.tab = $event;
      getList()
    "
  >
    <div slot="buttons" class="button">
      <div class="left">
        <el-button size="small" type="success">导出数据</el-button>
        <el-button size="small" type="danger">批量删除</el-button>
      </div>
      <div class="right">
        <el-input placeholder="要搜索的订单编号" size="small"></el-input>
        <el-button size="small" type="info">搜索</el-button>
        <el-button size="small">高级搜索 </el-button>
      </div>
    </div>
    <Table
      :cols="cols"
      :data="list"
      :loading="queryloading"
    >
      <template v-slot:goods="{ row }">
        <div>订单编号：{{ row.no }} 下单时间：{{ row.create_time }}</div>
        <div>{{ row.closed ? "该商品已删除" : "该商品可以正常购买" }}</div>
      </template>
      <template v-slot:pay="{ row: { total_price } }">
        ￥{{ total_price }}
        <div>(含运费: ￥0.00)</div>
      </template>
      <template
        v-slot:buyer="{
          row: {
            user: { username, id },
          },
        }"
      >
        {{ username }}
        <div>(用户id:{{ id }})</div>
      </template>
      <template
        size="small"
        v-slot:payOption="{ row: { payment_method = 'default' } }"
      >
        <el-tag :type="paymenOptions[payment_method || 'default'].color">
          {{ paymenOptions[payment_method || "default"].title }}
        </el-tag>
      </template>
    </Table>
  </Layout>
</template>

<script>
import { getOrderlist } from "api/goods";
export default {
  name: "goodsList",
  data() {
    return {
      /**
       * 总条数
       */
      total: 0,
      /**
       * 分页数据
       */
      page: {
        tab: "all",
        limit: 10,
        num: 1,
      },
      /**
       * 表格配置项
       */
      cols: [
        {
          type: "selection",
        },
        {
          title: "商品",
          slot: "goods",
        },
        {
          title: "实付款",
          slot: "pay",
        },
        {
          title: "支付方式",
          slot: "payOption",
        },
        {
          title: "配送方式",
          slot: "post",
        },
        {
          title: "交易状态",
          slot: "state",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      /**
       * 支付信息
       */
      paymenOptions: {
        default: {
          color: "info",
          title: "未支付",
        },
        alipay: {
          color: "",
          title: "支付宝支付",
        },
        wxpay: {
          color: "success",
          title: "微信支付",
        },
      },
      /**
       * 状态
       */
      state: {
        all: "全部",
        checking: "审核中",
        saling: "出售中",
        off: "已下架",
      },
    };
  },
  methods: {
    /**
     * 获取订单
     */
    async getList() {
      try {
        this.queryloading = true;
        const { list, totalCount } = await getOrderlist(this.page);
        this.total = totalCount;
        this.list = list;
      } catch (error) {}
      this.queryloading = false;
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .right {
    ::v-deep .el-input {
      width: 150px;
      margin-right: 10px;
    }
  }
}
</style>